<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <div th:replace="common::bootstrap"></div>

    <style type="text/css">
        .active {
            background-color: #9fff6e !important;
        }
    </style>
</head>
<body>
<form th:action="@{/user}" method="get">
    <input name="id" value=""/>
    <input type="submit" value="REST GET"/>
</form>
<form th:action="@{/user}" method="post">
    <input name="username" value="张三">
    <input name="email" value="zs@qq.com">
    <input name="age" value="21">
    <input type="submit" value="REST POST"/>
</form>
<form th:action="@{/user}" method="post">
    <input name="_method" value="delete">
    <input name="id" value=""/>
    <input type="submit" value="REST DELETE"/>
</form>
<form th:action="@{/user}" method="post">
    <input name="_method" value="put">
    <input name="id" value=""/>
    <input name="username" value="张三">
    <input name="email" value="zs@qq.com">
    <input name="age" value="21">
    <input type="submit" value="REST PUT"/>
</form>

<ul>
    <li>
        <a href="/car/123/owner/我的爱车?age=21&inters=篮球&inters=跑步">我的爱车</a>
    </li>
    <li>
        <a href="/goto">@RequestAttribute</a>
    </li>
</ul>

<form action="/save" method="post">
    <input name="username" value="张三"/>
    <input type="submit" value="REST SAVE"/>
</form>
<div class="row">
    <div class="col-xs-6">
        <h1>用户列表</h1>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>#</td>
                <td>ID</td>
                <td>UserName</td>
                <td>Email</td>
                <td>Age</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user,iterStat: ${userPage.records}">
                <td th:text="${iterStat.count}">1</td>
                <td th:text="${user.id}">1</td>
                <td th:text="${user.username}">***</td>
                <td th:text="${user.email}">**@qq.com</td>
                <td th:text="${user.age}">23</td>
                <td th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}">2020-12-12 12:12:12</td>
                <td>
                    <a class="btn btn-danger btn-xs"
                       th:href="@{/user/delete/{id}(id=${user.id},pn=${userPage.current})}" role="button">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="row text-center">
            当前第 <span th:text="${userPage.current}">1</span> 页，总共 <span th:text="${userPage.pages}">1</span> 页，共 <span
                th:text="${userPage.total}">1</span> 条记录
        </div>
        <nav aria-label="Page navigation" class=" text-center">
            <ul class="pagination">
                <li>
                    <a th:href="@{/user/list(pn=${userPage.current} - 1)}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:each="num:${#numbers.sequence(1,userPage.pages)}">
                    <a th:href="@{/user/list(pn=${num})}"
                       th:class="${num == userPage.current ? 'active':''}">[[${num}]]</a>
                </li>
                <li>
                    <a th:href="@{/user/list(pn=${userPage.current} + 1)}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>